<template>
  <div style="overflow-y: hidden; background: #fff">
    <px-tabs v-model="activeTab" class="equipment-tabs" style="margin-bottom: 10px; margin-left: 16px; background: none">
      <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="item.name">
        <template #label>
          <p class="pane-bottom">{{ item.label }}</p>
          <p class="pane-line" />
        </template>
      </px-tab-pane>
    </px-tabs>
    <div class="title-content">
      <div class="title">固定污染源废气-检测报告</div>
      <div class="sub-text">排放源名称：&nbsp;STIC北方集成电路技术创新中心</div>
      <div class="sub-text">排放源编号：&nbsp;固定污染源废气</div>
    </div>
    <manualMeter pageFrom="vocReport" :groupCode="queryParams.groupCode" :exportFileName="activeTab" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import manualMeter from "@/views/common/components/manualMeter/index.vue";

defineOptions({
  name: "MACHINE_VOC_REPORT"
});

const queryParams = reactive({
  timeRange: "",
  groupCode: computed(() => {
    switch (activeTab.value) {
      case "酸排":
        return "MICH_EXHAUST_ACID";
      case "碱排":
        return "MICH_EXHAUST_ALK";
      case "有机排":
        return "MICH_EXHAUST_ORG";
      default:
        return "";
    }
  })
});
const activeTab = ref("酸排");
const tabPaneList = ref([
  {
    label: "酸排",
    name: "酸排"
  },
  {
    label: "碱排",
    name: "碱排"
  },
  {
    label: "有机排",
    name: "有机排"
  },
  {
    label: "砷排",
    name: "砷排"
  }
]);
</script>
<style lang="scss" scoped>
.title-content {
  padding: 0 20px;
  // margin-top: 12px;
  background: #fff;

  .title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
  }

  .sub-text {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
